<template>
  <el-dialog :visible.sync="visible"
             title=""
             :close-on-click-modal="false"
             :append-to-body="true"
             :before-close="closeDialog"
             class="add-or-updata"
             width="35%"
             :close-on-press-escape="false">
    <el-form :model="dataForm"
             v-loading='dataListLoading'
             ref="dataForm"
             label-position="left"
             style="overflow: hidden;"
             @keyup.enter.native="dataFormSubmitHandle()"
             label-width="66px">
      <el-form-item label="板块"
                    :rules="required()"
                    prop="plateId">
        <el-select v-model="dataForm.plateId"
                   clearable
                   filterable
                   class="width-100"
                   placeholder="所在位置">
          <el-option v-for="item in plateList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button type="primary"
                 :loading="isRequest"
                 @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
      <el-button @click="closeDialog">{{ $t('cancel') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import formValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, formValidate],
  components: {
  },
  data () {
    return {
      visible: false,
      isRequest: false,
      mixinViewModuleOptions: {
        addURL: '/system/sysPermission/insertExternalLink' // 添加或修改的接口
      },
      deptListVisible: false,
      parentNameOptions: [],
      plateList: [],
      dataForm: {
        plateId: ''
      }
    }
  },
  computed: {
  },
  methods: {
    closeDialog () {
      this.$refs['dataForm'].resetFields()
      this.visible = false
      this.isRequest = false
    },
    init () {
      this.visible = true
      this.getPlate()
      this.getPlateList()
    },
    // 查看外部链接所属板块
    getPlate () {
      this.$http.get('/system/sysPermission/getExternalLink').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data !== null) {
          this.dataForm.plateId = res.data.name
        }
      })
    },
    // 查询外部链接所属板块
    getPlateList () {
      this.$http.get('/system/sysPermission/getLinkList').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.plateList = res.data
      })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const url = this.mixinViewModuleOptions.addURL
          let params = {}
          params = Object.assign({}, {}, this.dataForm)
          this.addOrUpdateItem({ url, paramData: params }).then(res => {
            this.isRequest = false
            if (res.code !== 0) { return }
            this.$emit('callBack')
            this.closeDialog()
          })
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
.menu-close {
  position: absolute;
  top: 35%;
  right: 1%;
  cursor: pointer;
}

.mod-sys__menu {
  .menu-list,
  .icon-list {
    position: relative;

    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }

  &-icon-popover {
    width: 458px;
    overflow: hidden;
  }

  &-icon-inner {
    width: 478px;
    max-height: 258px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &-icon-list {
    width: 458px;
    padding: 0;
    margin: -8px 0 0 -8px;

    > .el-button {
      padding: 8px;
      margin: 8px 0 0 8px;

      > span {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        font-size: 18px;
      }
    }
  }
}

.el-col .isUser .el-form-item__content {
  margin-left: 70px !important;
}
</style>
